<template>
	<view class="cu-list menu-avatar">
		<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in props.list"
			:key="index" @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
			:data-target="'move-box-' + index">
			<view class="cu-avatar round lg"
				:style="[{backgroundImage:'url('+item.avatarUrl+')'}]">
			</view>
			<view class="content">
				<view class="text-grey">{{item.name}}</view>
				<view class="text-gray text-sm text-size-28">
					{{item.weight}}吨
				</view>
			</view>
			<view class="action">
				<view class="cu-tag round bg-blue sm">待接受</view>
				<view class="text-grey text-xs">22:20</view>
			</view>
			<view class="move">
				<view @click="handleUpdate" :data-index="index" class="bg-grey">修改</view>
				<view @click="handleMove" :data-index="index" class="bg-red">删除</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		ref
	} from "vue";
	const setting = useSettingStore();
	const emit = defineEmits(['delete','update']);
	const props = defineProps({
		menuBorder: {
			type: [Boolean, String],
			default: false
		},
		menuCard: {
			type: [Boolean, String],
			default: false
		},
		menuArrow: {
			type: [Boolean, String],
			default: false
		},
		list: Array
	})
	const modalName = ref('')
	let listTouchStart = 0
	let listTouchDirection = ''
	// const handleSelect = (e) => {
	// 	emit('action', e)
	// }
	// ListTouch触摸开始
	const ListTouchStart = (e: any) => {
		listTouchStart = e.touches[0].pageX
	}

	// ListTouch计算方向
	const ListTouchMove = (e: any) => {
		listTouchDirection = e.touches[0].pageX - listTouchStart > 0 ? 'right' : 'left'
	}

	// ListTouch计算滚动
	const ListTouchEnd = (e: any) => {
		if (listTouchDirection == 'left') {
			modalName.value = e.currentTarget.dataset.target
		} else {
			modalName.value = ''
		}
		listTouchDirection = ''
	}
	const handleMove = (e: any) => {
		let index = e.currentTarget.dataset.index
		emit('delete', index)
	}
	const handleUpdate= (e: any) => {
		let index = e.currentTarget.dataset.index
		emit('update', index)
	}
</script>

<style>
</style>
